<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <!-- 作业需求：完成视频中留言板项目json文件自己完成，模仿jsonPlaceholder的格式样式自由发挥 -->

  <link rel="stylesheet" href="css/index.css">
  <script src="js/jquery-1.12.4.min.js"></script>
  <script src="js/template-native.js"></script>
  <!-- 创建数据 -->
  <script type="text/html" id="tem">
    <!-- 获取到的数据进行遍历 -->
  <% for(var i=0; i < Participants.length; i++){ %>
    <li ulid="<%= Participants[i].id %>">
      <p class="order">第<%=Participants[i].id %>位<a href="javascript:" class="delete">删除</a></p>
      <span>参与人:</span> <span class="name">
        <%=Participants[i].userName %>
      </span>
      <p class="opinion">
        <%=Participants[i].userOpinion %>
      </p>
    </li>
    <%}%>
  </script>
</head>

<body>
  <div class="bigbox">
    <div class="box1">
      <h2>留言板</h2>
      <span>发表人:</span> <span>莤韫</span>
      <p>一起讨论一下住宅景观的现状吧！</p>
    </div>
    <div class="box2">
      <h4>请大家踊跃发言！</h4>
      用户名：<input type="text" class="text"><br>
      <textarea name="" id="" cols="113" rows="10" class="textplus"></textarea>
      <button class="btn">发表</button>
    </div>
    <div class="box3">
      <ul class="lists">
        <!-- <li>
          <p class="order">第1位 <span><a href="javascript:" class="delete">删除</a></span></p> 
          <span>参与人:</span> <span class="name">景观达人</span>
          <p class="opinion">景观多元化，舒适度大幅度提升!</p>
        </li> -->

      </ul>
    </div>
  </div>
  <script>
    // 获取元素
    var $lists = $(".box3 .lists")
    var $btn = $(".box2 .btn")
    var $text = $(".box2 .text")
    var $textplus = $(".box2 .textplus")
    getdata()
    // 获取数据库中的数据 （get)
    function getdata() {
      $.ajax({
        url: " http://localhost:3000/db ",
        type: "GET",
        success: function (data) {
          // console.log(data)
          // 获取的数据添加到页面上
          $lists.html(template("tem", data))
          // 添加完数据之后，点击删除---删除整个li的标签
          deleteData()
        }
      })
    }
    // 点击按钮获取到用户名和文本内容，然后将这些内容添加到数据库中，再从数据库中获取数据添加到页面上
    // 点击按钮获取到用户名和文本内容
    $btn.click(function () {
      var userName = $text.val()
      var userOpinion = $textplus.val()
      // console.log(userName)
      // console.log(userOpinion)
      // 添加一项新的数据到数据库中
      $.ajax({
        url: "http://localhost:3000/Participants",
        type: "POST",
        dataType: "json",
        data: { userName: userName, userOpinion: userOpinion },
        success: function (data) {
          // console.log(data)
          $lists.append(template("tem", { "Participants": [data] }))

          // 新增完数据之后，点击删除---删除整个li的标签
          deleteData()
        }
      })
      // 清空数据
      $text.val("")
      $textplus.val("")
    })

    // 定义删除数据的函数
    function deleteData() {
      // console.log($(".box3 .lists .delete"))
      $(".box3 .lists .delete").click(function () {
        // 找到祖先级li标签
        $li = $(this).parents("li")
        // console.log($li)
        // 点击谁删除谁 删除的这一项li的顺序与数据库中的id的数字对应，需要找到数据库中的id
        // 因此给li标签添加一个属性就是数据库中的id数字在循环是添加是一个变量
        var index = $li.attr("ulid")
        // console.log(index)
        // 删除数据库中的此项数据（DELETE）
        $.ajax({
          url: "http://localhost:3000/Participants/" + index,
          type: "DELETE",
        })
        // 删除页面的li完整的html结构 
        $li.remove()
      })

    }



  </script>
</body>

</html>